<template>
  <div
    class="yi-combine flex-c"
    :style="{
      gap: '4px',
      flex: 'none',
      lineHeight: 1,
      fontWeight: 600,
      ...extraStyle,
    }"
    :aria-label="TITLE"
    v-bind="$attrs"
  >
    <Mono :size="size" />
    <Text :size="textSize" />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import Mono from "./Mono.vue"
import Text from "./Text.vue"
import { COMBINE_TEXT_MULTIPLE, TITLE } from "../style"

defineOptions({
  name: "YiCombine",
  inheritAttrs: false,
})

interface Props {
  size?: string | number
  extraStyle?: Record<string, any>
}

const props = withDefaults(defineProps<Props>(), {
  size: "1em",
  extraStyle: () => ({}),
})

const textSize = computed(() => {
  const sizeValue = typeof props.size === "string" ? props.size : `${props.size}px`
  const numericSize = typeof props.size === "number" ? props.size : parseFloat(sizeValue) || 16
  return `${numericSize * COMBINE_TEXT_MULTIPLE}px`
})
</script>
